<template>
	<view class="goodList">
		<view class="goods">
			<view class="goodBox" v-for="(item,index) in goodList" :key="index" @click="goToDetail(item)">
				<view class="goodTop">
					<image class="goodImg" :src="item.content.slice(item.content.indexOf(']')+2,item.content.indexOf('￥')+5)" mode="aspectFill" width="170"></image>
				</view>
			
				<view class="goodBottom">
					<text class="goodName">{{item.travelName}}</text>
					<text class="goodDetail">{{item.summary}}</text>
					<text class="goodPrice">石友价：￥{{item.price}}万</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			afterSearch:Array
		},
		data() {
			return {
				page: 1,
				pageSize: 100,
				goodList: []
			}
		},
		mounted() {
			uni.request({
				url: "http://localhost:3000/travel/getAllTravelsByPage",
				method: "GET",
				data: {
					currentPage: this.page,
					pageSize: this.pageSize,
				},
				success: (res) => {
					if(res?.data?.code==200){
						this.goodList = res?.data?.data?.rows;
					}
					else{
						this.$u.toast(res?.data?.data?.message);
					}
				},
				fail:(res) => {
					this.$u.toast(res?.data?.msg);
				}
			})
		},
		watch:{
			afterSearch(nval){
				this.goodList = nval
			}
		},
		methods:{
			//跳转到商品详情页面
			goToDetail: function(item) {
				uni.navigateTo({
					url: "/pages/goods/detail?travelId="+item.travelId,
				})
			}
		}
	}
	
</script>



<style lang="scss" scoped>
	.goodList{
		margin: $uni-spacing-row-lg;
		.goods{
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 30rpx;
			padding-top: 8rpx;
			.goodBox {
				width: 172px;
				height: 262px;
				box-shadow: 1px 0px 7px 0px rgba(0, 0, 0, 0.1);
				.goodTop {
					.goodImg {
						width: 100%;
						height: 172px;
						border-radius: 10rpx 10rpx 0 0;
					}
				}
				.goodBottom {
					background-color: #fff;
					border-radius: 0 0 20rpx 20rpx;
					display: flex;
					flex-direction: column;
					padding: 20rpx;
					position: relative;
					top: -3px;
					.goodName {
						font-size: 20px;
					}
					.goodDetail{
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.goodPrice {
						color: red;
						font-size: 16px;
					}
				}
			}
		}
	}
	
</style>